<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;

        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background: url(static/js/login.jpg) no-repeat 0px 0px;
        background-size: 100% 100%;
    }

    #loginDiv {
        width: 37%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 650px;
        background-color: rgba(75, 81, 95, 0.3);
        box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
        border-radius: 5px;
    }

    #name_trip {
        margin-left: 50px;
        color: red;
    }

    p,
    .sexDiv {
        margin-top: 10px;
        margin-left: 20px;
        color: azure;
    }

    .sexDiv>input,
    .hobby>input {
        width: 30px;
        height: 17px;
    }

    input,
    select {
        margin-left: 15px;
        border-radius: 5px;
        border-style: hidden;
        height: 30px;
        width: 140px;
        background-color: rgba(216, 191, 216, 0.5);
        outline: none;
        color: #f0edf3;
        padding-left: 10px;
    }

    .button {
        border-color: cornsilk;
        background-color: rgba(100, 149, 237, .7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 100px;
        height: 31px;
        font-size: 16px;
    }

    .introduce {
        margin-left: 110px;
    }

    .introduce>textarea {
        background-color: rgba(216, 191, 216, 0.5);
        border-style: hidden;
        outline: none;
        border-radius: 5px;
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
        margin-top: 20px;
        color: #f0edf3;
    }

    b {
        margin-left: 50px;
        color: #FFEB3B;
        font-size: 10px;
        font-weight: initial;
    }
</style>
<body>
<script type="text/javascript">

</script>

<div id="loginDiv">
    <form id="sub">
        <h1>完善个体信息</h1>

        <input type="hidden" name="userId" id="userId">
        <p>真实姓名:<input id="userNname" name="userRealName" type="text" autofocus required><label id="name_trip"></label></p>

        <p>邮箱:  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="password" name="userEmail" type="text" required><label id="password_trip"></label></p>

        <p>手机号&nbsp;&nbsp;:&nbsp;  <input id="surePassword"  name="userPhone" type="text" required><label id="surePassword_trip"></label></p>

        <p>地址:  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input  type="text" required><label id=""></label></p>
        <p style="text-align: center;">
            <input type="button"  onclick='addUserInfo()' value="提交">
            <input type="reset"  value="重置">
        </p>
    </form>
</div>

<script type="text/javascript">
    var userId = parent.$("#userid").text();
    $(function (){
        $("#userId").val(userId);
    })

    function addUserInfo(){
        $.ajax({
            url:"/addUserInfo",
            type:"post",
            data:$("#sub").serialize(),
            dataType:"json",
            success:function (data){
                alert(data.message)
                if(data.message == "保存成功"){
                    location.href = "login.html"
                }
            },
            error:function (){
                alert("异常链接")
            }
    })
    }
</script>
</body>
</html>